<template>
    <el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :model-value="modelValue" @close="closeForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">编辑配置项</div>
        </template>
        <el-scrollbar class="ba-table-form-scrollbar">
            <div class="ba-operate-form ba-add-form" :style="'width: calc(100% - ' + state.labelWidth / 2 + 'px)'">
                <el-form
                    ref="formRef"
                    :rules="rules"
                    :model="{ ...state.editConfig, ...state.formItemData }"
                    label-position="right"
                    :label-width="160"
                >
                    <CreateFormItemData v-model="state.formItemData" :options="state.options" :key="props.configData as any" />
                    <FormItem :label="'权重'" type="number" v-model.number="state.editConfig.weigh" prop="weigh" />
                    <!-- <FormItem
                        :label="'允许删除'"
                        v-model.number="state.editConfig.allow_del"
                        prop="allow_del"
                        type="radio"
                        :data="{ content: { 0: '否', 1: '是' }, childrenAttr: { border: true } }"
                    /> -->
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
                <el-button @click="closeForm">取消</el-button>
                <el-button v-blur :loading="state.submitLoading" @click="onAddSubmit()" type="primary">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import FormItem from '/@/components/formItem/index.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import CreateFormItemData from '/@/components/formItem/createData.vue'
import { useI18n } from 'vue-i18n'
import { postData } from './setting'

interface Props {
    modelValue: boolean
    configGroup: anyObj
    config: anyObj
    url: string
    configData: anyObj
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    configGroup: () => {
        return {}
    },
    url: '',
    configData: () => {
        return {}
    },
})

const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'update:config', value: anyObj): void
}>()

const closeForm = () => {
    emits('update:modelValue', false)
}

const { t } = useI18n()
const formRef = ref<FormInstance>()
const state: {
    inputTypes: anyObj
    labelWidth: number
    submitLoading: boolean
    editConfig: {
        group: string
        weigh: number
        content: string
        allow_del: number
    }
    formItemData: anyObj
    options: anyObj
} = reactive({
    inputTypes: {},
    labelWidth: 180,
    submitLoading: false,
    editConfig: {
        group: '',
        weigh: 0,
        content: '',
        allow_del: 0,
    },
    formItemData: {
        dict: `key1=value1
key2=value2`,
    },
    options: {
        name: {},
        type: {
            inputAttr: {
                filterable: true,
            },
        },
    },
})

const rules = reactive<FormRules>({
    name: [
        buildValidatorData({ name: 'required', title: '变量名' }),
        buildValidatorData({ name: 'varName', message: t('Please enter the correct field', { field: '变量名' }) }),
    ],
    title: [buildValidatorData({ name: 'required', title: '变量标题' })],
    type: [
        buildValidatorData({
            name: 'required',
            trigger: 'change',
            message: t('Please select field', { field: '变量类型' }),
        }),
    ],
    weigh: [buildValidatorData({ name: 'integer', title: '数字' })],
})

const onAddSubmit = () => {
    if (!formRef.value) return
    formRef.value.validate((valid) => {
        if (valid) {
            state.editConfig.content = state.formItemData.dict
            delete state.formItemData.dict
            postData(props.url, 'edit', { ...state.editConfig, ...state.formItemData }).then(() => {
                emits('update:modelValue', false)
                emits('update:config', {})
            })
        }
    })
}

watch(
    () => props.configData,
    (newVal) => {
        state.editConfig.group = newVal.group
        state.editConfig.weigh = newVal.weigh
        state.editConfig.allow_del = newVal.allow_del
        state.formItemData = { ...newVal }
        state.formItemData.dict = newVal.content
        state.options.name.inputAttr = { disabled: true }
    }
)
</script>

<style scoped lang="scss"></style>
